<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>Cheatsheet · Bootstrap v5.1</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/cheatsheet/">



 
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

  <!-- Favicons -->
  <link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
  <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
  <link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
  <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">

  <meta name="theme-color" content="#7952b3">

  <script src="./js/echarts.min.js"></script>
  <script src="./js/echarts-wordcloud.js"></script>
  <script src="./js/echarts-wordcloud.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- <script src="https://assets.pyecharts.org/assets/v5/maps/guang3_dong1_guang3_zhou1.js"></script> -->

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="./css/cheatsheet.css" rel="stylesheet">
</head>

<body class="bg-light">

  <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
    <div class="container-fluid d-flex align-items-center">
      <h1 class="d-flex align-items-center fs-4 text-white mb-0">
        <!-- <img src="/docs/5.1/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap"> -->
        <a href="" style="text-decoration: none;color: inherit;">数据看板</a>
      </h1>
      <a href="https://gitee.com/guo-junbin/data-visualization" class="ms-auto link-light" hreflang="ar">Click Gitee</a>
    </div>
  </header>

  <aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
    <h2 class="h6 pt-4 pb-3 mb-4 border-bottom"><a>Back to top</a></h2>
    <nav class="small" id="toc">
      <ul class="list-unstyled">
        <li class="my-2">
          <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false"
            data-bs-target="#contents-collapse" aria-controls="contents-collapse">介绍</button>
          <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
            <li><a class="d-inline-flex align-items-center rounded" href="#typography">主题讲解</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#images">小组成员</a></li>
            <!-- <li><a class="d-inline-flex align-items-center rounded" href="#tables">待定</a></li> -->
            <!-- <li><a class="d-inline-flex align-items-center rounded" href="#figures">待定</a></li> -->
          </ul>
        </li>
        <li class="my-2">
          <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false"
            data-bs-target="#forms-collapse" aria-controls="forms-collapse">词云图</button>
          <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
            <li><a class="d-inline-flex align-items-center rounded" href="#overview">岗位技术要求</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#sizing">岗位不同名称</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#input-group">岗位分布</a></li>
            <!-- <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">待定</a></li> -->
            <!-- <li><a class="d-inline-flex align-items-center rounded" href="#validation">待定</a></li> -->
          </ul>
        </li>
        <li class="my-2">
          <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false"
            data-bs-target="#components-collapse" aria-controls="components-collapse">薪资概况</button>
          <ul class="list-unstyled ps-3 collapse" id="components-collapse">
            <li><a class="d-inline-flex align-items-center rounded" href="#accordion">不同学历</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#alerts">工作年限</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#badge">不同地区</a></li>
            <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">不同岗位</a></li>

            <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>

          </ul>
        </li>
      </ul>
    </nav>
  </aside>
  <div class="bd-cheatsheet container-fluid bg-body">
    <section id="content">
      <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
      <p class="display-3" style="margin-top: auto;text-align: center;"><b>交互式可视化期末作业</b></p>

      <article class="my-3" id="typography">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>介绍</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/content/typography/">Documentation</a>
        </div>

        <div>

          <!-- <p class="display-1">交互式可视化期末作业</p> -->
          <p class="display-6" style="margin: auto;font-size: 30px;text-align: justify;text-indent: 2em;">
            该项目的背景和目的在于使用交互式数据可视化的方式，针对广州地区的岗位数据，构建一个全面而易读的数据看板，帮助劳动者更好地了解市场需求，提高人才培养的有效性和效率。</p>
          <br id="images">
          <br>
          <p class="display-6" style="text-align: center;" id="images"><b>小组成员：</b></p>
          <p class="display-6" style="text-align: center;">刘琪涛，李铸波，雷云龙，郭俊彬</p>
        </div>






        <article class="my-3" id="tables">
          <!-- <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
        <h3>小组成员</h3>
        <a class="d-flex align-items-center" href="/docs/5.1/content/tables/">Documentation</a>
      </div> -->

          <div>
            <div class="bd-example">
            </div>




            <div class="bd-example">

            </div>
          </div>
        </article>
        <article class="my-3" id="figures">

        </article>
    </section>

    <section id="forms">

      <article class="my-3" id="overview">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>岗位产品类型</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/forms/overview/">wait on...</a>
        </div>
        <div id="wordCloud1" style="width: 600px; height: 700px;"></div>

        <div>
          <div class="bd-example">

          </div>
      </article>
      <article class="my-3" id="sizing">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>岗位不同名称</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/forms/overview/">wait on...</a>
        </div>
        <div id="wordCloud2" style="width: 600px; height: 700px;"></div>

        <div>
          <div class="bd-example">

          </div>
        </div>
      </article>
      <article class="my-3" id="input-group">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>岗位分布</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/forms/input-group/">Documentation</a>
        </div>
        <div id="main" style="width: 600px;height:400px;"></div>
        <div>
          <div class="bd-example">


          </div>
        </div>
      </article>
      <!-- <article class="my-3" id="floating-labels">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>待定</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/forms/floating-labels/">Documentation</a>
        </div>

        <div>
          <div class="bd-example">

          </div>
        </div>
      </article>
      <article class="my-3" id="validation">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>待定</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/forms/validation/">Documentation</a>
        </div> -->

        <div>
          <div class="bd-example">

          </div>
        </div>
      </article>
    </section>

    <section id="components">
      <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">薪资概况</h2>

      <article class="my-3" id="accordion">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>不同学历</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/components/accordion/">Documentation</a>
        </div>

        <div>
          <div class="bd-example">
            <div class="accordion" id="accordionExample">

              <!-- 尝试echarts扇形图 -->
              <div id="shanxingtu" style="width: 600px;height:400px;"></div>

              <!-- <div class="accordion-item">
          </div> -->
            </div>
          </div>
        </div>
      </article>
      <article class="my-3" id="alerts">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>工作年限</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/components/alerts/">Documentation</a>
        </div>
        <div id="zhuzhuangtu" style="width: 600px;height:400px;"></div>

        <div>
          <div class="bd-example">


          </div>

          <div class="bd-example">

          </div>
        </div>
      </article>
      <article class="my-3" id="badge">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>不同地区</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/components/badge/">Documentation</a>
        </div>

        <div>
          <div class="bd-example">
          </div>
          <!-- 加入动态图 -->
          <div id="gif_data" style="width: 600px;height:400px;"></div>


          <div class="bd-example">


          </div>
        </div>
      </article>
      <article class="my-3" id="breadcrumb">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>不同岗位</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/components/breadcrumb/">Documentation</a>
        </div>

        <div>
          <div class="bd-example">
            <div id="rose" style="width: 750px;height: 800px;"></div>
          </div>
        </div>
      </article>

      <article class="my-3" id="navs">
        <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
          <h3>Navs</h3>
          <a class="d-flex align-items-center" href="/docs/5.1/components/navs-tabs/">Documentation</a>
        </div>

        <div>


          <div class="bd-example">
            <nav>
              <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home"
                  type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile"
                  type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact"
                  type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
              </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another
                  tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control
                  the content visibility and styling. You can use it with tabs, pills, and any other
                  <code>.nav</code>-powered navigation.
                </p>
              </div>
              <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking
                  another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
                  control the content visibility and styling. You can use it with tabs, pills, and any other
                  <code>.nav</code>-powered navigation.
                </p>
              </div>
              <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking
                  another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
                  control the content visibility and styling. You can use it with tabs, pills, and any other
                  <code>.nav</code>-powered navigation.
                </p>
              </div>
            </div>
          </div>

          <div class="bd-example">

          </div>
        </div>
      </article>

      <div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


      <script src="./js/bootstrap.bundle.min.js"></script>

      <script src="./js/cheatsheet.js"></script>
</body>

</html>

<!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
</head>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart0 = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option0 = {
    title: {
      text: '广州各区产品经理岗位分布数量'
    },
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['天河区','番禺区','黄浦区','海珠区','越秀区','白云区','荔湾区','南沙区','花都区','增城区']

    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'bar',
      data: [84,52,43,34,20,19,10,4,2,1]
    }]
  };

  myChart0.setOption(option0);

  var myChart1 = echarts.init(document.getElementById('shanxingtu'));

  // 指定图表的配置项和数据
  var option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '不同学历平均薪资',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 22.5, name: '大专' },
          { value: 35.0, name: '大专及以上' },
          { value: 32.5, name: '学历不限' },
          { value: 22.5, name: '本科' },
          { value: 27.5, name: '本科及以上' },
          { value: 27.5, name: '硕士' },
          { value: 56.25, name: '硕士及以上' },
          { value: 27.5, name: '统招本科' }
        ]
      }
    ]
  };
  myChart1.setOption(option1);
  var myChart2 = echarts.init(document.getElementById('zhuzhuangtu'));

  // 指定图表的配置项和数据
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1-3年', '10年以上', '3-5年', '5-10年', '经验不限']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [20.0, 45.0, 22.5, 27.5, 28.5],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option2);


  var myChart3 = echarts.init(document.getElementById('gif_data'));

  // 指定图表的配置项和数据
  const pathSymbols = {
    car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z'
  };
  const labelSetting = {
    show: true,
    position: 'right',
    offset: [10, 0],
    fontSize: 16
  };
  function makeOption(type, symbol) {
    return {
      title: {
        text: '广州不同地区平均薪资'
      },
      legend: {
        data: ['2015']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        containLabel: true,
        left: 20
      },
      yAxis: {
        data: ['广州', '南沙区', '增城区', '天河区', '海珠区', '番禺区', '白云区', '花都区', '荔湾区', '越秀区', '黄埔区'],
        inverse: true,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          margin: 30,
          fontSize: 14
        },
        axisPointer: {
          label: {
            show: true,
            margin: 30
          }
        }
      },
      xAxis: {
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
      },
      animationDurationUpdate: 500,
      series: [
        {
          name: 'price（k/月）',
          id: 'bar1',
          type: type,
          label: labelSetting,
          symbolRepeat: true,
          symbolSize: ['80%', '60%'],
          barCategoryGap: '40%',
          universalTransition: {
            enabled: true,
            delay: function (idx, total) {
              return (idx / total) * 1000;
            }
          },
          data: [
            {
              value: 27.30,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 16.25,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 14.00,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 25.55,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 20.85,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 26.70,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 20.80,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 22.50,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 25.55,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 29.80,
              symbol: symbol || pathSymbols.car
            },
            {
              value: 22.50,
              symbol: symbol || pathSymbols.car
            },
          ]
        },
        {
          name: '2016',
          id: 'bar2',
          type: type,
          barGap: '15%',
          label: labelSetting,
          symbolRepeat: true,
          symbolSize: ['70%', '60%'],
          universalTransition: {
            enabled: true,
            delay: function (idx, total) {
              return (idx / total) * 1000;
            }
          },
        }
      ]
    };
  }
  const options = [
    makeOption('pictorialBar'),
    makeOption('bar'),
    makeOption('pictorialBar', 'diamond')
  ];
  var optionIndex = 0;
  option3 = options[optionIndex];
  setInterval(function () {
    optionIndex = (optionIndex + 1) % options.length;
    myChart3.setOption(options[optionIndex]);
  }, 2500);

  // 使用刚指定的配置项和数据显示图表。
  myChart3.setOption(option3);


  var myChart4 = echarts.init(document.getElementById('rose'));

  // 指定图表的配置项和数据
  option4 = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 20.00, name: '专业技术服务' },
          { value: 43.15, name: '互联网' },
          { value: 27.10, name: '人工智能' },
          { value: 45.00, name: '其他商务服服务业' },
          { value: 20.00, name: '制药' },
          { value: 32.10, name: '制药/生物工程' },
          { value: 30.75, name: '医疗器械' },
          { value: 18.50, name: '医疗机构' },
          { value: 31.55, name: '医药流通' },
          { value: 23.30, name: '在线教育' },
          { value: 60.00, name: '在线社交/媒体' },
          { value: 7.50, name: '培训服务' },
          { value: 30.00, name: '基金/证券/期货' },
          { value: 22.00, name: '家具/家居' },
          { value: 24.40, name: '工程施工' },
          { value: 30.00, name: '工艺品' },
          { value: 27.5, name: '广告/公关/会展' },
          { value: 35.00, name: '房地产开发经营' },
          { value: 22.50, name: '批发/零售' },
          { value: 27.10, name: '日化' },
          { value: 30.00, name: '智能硬件' },
          { value: 24.00, name: '服装/纺织/皮革' },
          { value: 29.20, name: '机械/设备' },
          { value: 24.40, name: '游戏' },
          { value: 27.10, name: '电子/半导体/集成电路' },
          { value: 19.50, name: '电子商务' },
          { value: 38.35, name: '电气机械/器材	' },
          { value: 39.00, name: '科技金融' },
          { value: 24.40, name: '计算机软件' },
          { value: 21.50, name: '通信设备' },
          { value: 22.50, name: '食品/饮料/酒水' },
        ],
        emphasis: {
          label: {
            show: true,
            formatter: '{b}: {c}k'
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart4.setOption(option4);

  // 添加事件监听，实现缩放功能
  window.addEventListener('resize', function () {
    myChart4.resize();
  });
</script>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('wordCloud1'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '广州_产品经理_产品类型词云',
      left: 'center'
    },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',  //类型为字符云
        shape: 'smooth',  //平滑
        gridSize: 8, //网格尺寸
        size: ['50%', '60%'],
        //sizeRange : [ 50, 100 ],
        rotationRange: [-45, 0, 45, 90], //旋转范围
        textStyle: {
          normal: {
            fontFamily: '微软雅黑',
            color: function () {
              return 'rgb(' +
                Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) + ')'
            }
          },
          emphasis: {
            shadowBlur: 5,  //阴影距离
            shadowColor: '#333'  //阴影颜色
          }
        },
        left: 'center',
        top: '-10%',
        right: null,
        bottom: null,
        width: '100%',
        height: '100%',
        data: [
          { value: 3, name: 'b端产品' },
          { value: 6, name: '移动端产品' },
          { value: 1, name: '执业医师证' },
          { value: 1, name: '软硬件集成' },
          { value: 1, name: 'CRM软件' },
          { value: 1, name: 'B端产品经理' },
          { value: 1, name: '安保行业' },
          { value: 1, name: 'C端产品' },
          { value: 1, name: '轻奢风格' },

          { value: 1, name: 'ERP系统' },
          { value: 1, name: '神外' },
          { value: 1, name: '面销' },
          { value: 2, name: '交通/运输/物流' },
          { value: 1, name: '金融理财/贷款' },
          { value: 1, name: '供应链仓储' },
          { value: 1, name: '激光雷达' },
          { value: 1, name: '无人机' },
          { value: 1, name: '服务业' },

          { value: 1, name: '销售管理' },
          { value: 1, name: '护肤品' },
          { value: 12, name: '原型设计' },
          { value: 2, name: '医疗行业' },
          { value: 2, name: '期货证券' },
          { value: 21, name: 'IT互联网' },
          { value: 3, name: '房地产行业' },
          { value: 1, name: '固定收益' },
          { value: 23, name: '语音产品' },
          { value: 2, name: '投资产品' },
          { value: 1, name: '医疗' },
          { value: 1, name: '项目管理师' },
          { value: 7, name: 'axure' },
          { value: 10, name: '英文' },
          { value: 21, name: '信息安全' },
          { value: 16, name: '能源行业' },
          { value: 1, name: '商品运营' },
          { value: 1, name: '大数据平台' },
          { value: 1, name: 'IT产品经理' },
          { value: 1, name: '应急行业' },
          { value: 1, name: '消费品' },
          { value: 1, name: '金融行业' },
          { value: 1, name: '需求管理' },
          { value: 3, name: 'GCP认证' },
          { value: 4, name: '化妆品' },
          { value: 5, name: '泌尿外科' },
          { value: 6, name: '传感器' },
          { value: 7, name: 'CE认证' },
          { value: 8, name: '用户中心' },
          { value: 9, name: '5G行业' },
          { value: 10, name: '团队管理' },
          { value: 2, name: '音乐行业' },
          { value: 1, name: '人工智能' },
          { value: 3, name: '数据产品' },
          { value: 12, name: 'SaaS系统' },
          { value: 25, name: '生产经理' },
          { value: 10, name: '墨刀' },
          { value: 2, name: '计算机软件' },
          { value: 1, name: '广电行业' },
          { value: 1, name: '内容产品' },
          { value: 17, name: 'IT/互联网/软件' },
          { value: 5, name: '数据可视化' },
          { value: 5, name: 'web端产品' },
          { value: 5, name: '产品经理' },
          { value: 5, name: '咨询项目' },
          { value: 1, name: 'to C' },
          { value: 1, name: '智慧城市' },
          { value: 1, name: '信息化系统建设' },
          { value: 1, name: '光学相机' },
          { value: 2, name: '需求分析' },
          { value: 2, name: '工具产品' },
          { value: 2, name: 'word' },
          { value: 3, name: '软件开发' },
          { value: 4, name: '订单管理' },
          { value: 3, name: '摄像机' },
          { value: 4, name: '市场拓展' },
          { value: 3, name: '市场推广' },
          { value: 5, name: '无销售性质' },
          { value: 6, name: '游戏行业' },
          { value: 21, name: 'Visio' },
          { value: 10, name: '中台产品' },
          { value: 11, name: 'CRM' },
          { value: 12, name: '体外诊断产品' },
          { value: 13, name: 'Axure' },
          { value: 14, name: 'MMO游戏' },
          { value: 15, name: '旅游产品' },
          { value: 1, name: 'powerpoint' },
          { value: 1, name: '家具设计' },
          { value: 1, name: '发票产品' },
          { value: 7, name: '硬件产品' },
          { value: 10, name: '仪器设备' },
          { value: 15, name: '产品优化' },
        ],
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('wordCloud2'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '广州_产品经理_产品类型词云',
      left: 'center'
    },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',  //类型为字符云
        shape: 'smooth',  //平滑
        gridSize: 8, //网格尺寸
        size: ['50%', '60%'],
        //sizeRange : [ 50, 100 ],
        rotationRange: [-45, 0, 45, 90], //旋转范围
        textStyle: {
          normal: {
            fontFamily: '微软雅黑',
            color: function () {
              return 'rgb(' +
                Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) + ')'
            }
          },
          emphasis: {
            shadowBlur: 5,  //阴影距离
            shadowColor: '#333'  //阴影颜色
          }
        },
        left: 'center',
        top: '-10%',
        right: null,
        bottom: null,
        width: '100%',
        height: '100%',
        data: [
          { value: 22, name: '高级产品经理' },
          { value: 4, name: '产品经理岗' },
          { value: 4, name: '区域产品经理' },
          { value: 3, name: '高级产品PM' },
          { value: 3, name: '金融科技产品经理' },
          { value: 3, name: '助理产品经理' },
          { value: 2, name: 'Assistant Product Manager ' },
          { value: 2, name: '硬件产品经理' },
          { value: 2, name: '高级数据产品经理' },

          { value: 2, name: 'eWMS Product Manager' },
          { value: 2, name: '产品策划经理' },
          { value: 2, name: 'B端供应链产品经理' },
          { value: 2, name: 'IT产品经理' },
          { value: 2, name: 'C端产品经理' },
          { value: 2, name: '中后台产品经理' },
          { value: 2, name: '产品经理-产品企划' },
          { value: 2, name: 'AI产品经理' },
          { value: 2, name: 'AIGC产品经理' },

          { value: 1, name: '产品负责人' },
          { value: 1, name: '高级TMS产品经理 ' },
          { value: 1, name: '海外产品经理' },
          { value: 1, name: '海外社交产品经理' },
          { value: 1, name: '助理产品经理—食品类' },
          { value: 1, name: '临床试验项目经理PM' },
          { value: 1, name: 'IT平台产品经理主管工程师' },
          { value: 1, name: '低空产品经理' },
          { value: 1, name: '互联网医疗产品经理' },
          { value: 1, name: '高级产品经理-面料' },
          { value: 1, name: 'b端产品经理' },
          { value: 1, name: '高级硬件产品经理' },
          { value: 1, name: 'B端供应链产品经理 ' },
          { value: 1, name: '产品经理PM' },
          { value: 1, name: 'Senior Product Manager' },
          { value: 1, name: '数字化产品经理' },
          { value: 1, name: '安全类产品经理' },
          { value: 1, name: '产品经理-肿瘤' },
          { value: 1, name: 'ERP产品经理' },
          { value: 1, name: '游戏PM' },
          { value: 1, name: 'B段产品经理' },
          { value: 1, name: '数码产品经理' },
          { value: 1, name: 'Automation Product Manager' },
          { value: 1, name: '智能硬件产品经理' },
          { value: 1, name: '解决方案产品经理 ' },
          { value: 1, name: '游戏高级美术PM' },
          { value: 1, name: '神外产品销售经理 Product Sales Manager' },
          { value: 1, name: '医药高级产品经理' },
          { value: 1, name: '活动PM' },
          { value: 1, name: '高级医药产品经理' },
          { value: 1, name: '高级销售工程师' },
          { value: 1, name: '网安产品经理' },
          { value: 1, name: '投资交易业务系统产品经理' },
        ],
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

